<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const data = [
  {id:"01", name: "张大大", pid:"", job: "项目经理"},
    
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
    
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
    
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
    
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

// 定义函数方法两个参数 list表示数据源，rootValue表示最顶级的pid
// function arrToTree(list,rootValue) {
//     // 定义一个数组来装处理后的树形数据
//   const treeData = []
// //   遍历数据源
//   list.forEach(item => {
//     //   判断元素的pid是否为当前最顶级的pid
//      if(item.pid === rootValue) {
//         //  符合条件，当前元素直接放到数组中
//        treeData.push(item)
//     //    重新调用这个函数，顶级pid为本次元素的id
//        const children = arrToTree(list,item.id)
//     //    判断下一级有有没符合条件的
//        if(children.length) {
//     // 将符合条件的元素集合存放到上一级元素的children属性中
//          item.children = children  
//        }
//      }
//   })
//     // 返回所有符合本次条件元素集合
//      return treeData
  
// }

// const tree = arrToTree(data,'')
// console.log(tree)


function arrToTree(list,rootValue) {
    const treeDate = []
    list.forEach(item => {
        if(item.pid === rootValue) {
            treeDate.push(item)
            const children = arrToTree(list,item.id)
            if(children.length) {
                item.children = children
            }
        }
    })
    return treeDate 
}
console.log(arrToTree(data,''))



    </script>
</body>
</html>